/**-定义变量-**/
@ft-family: "微软雅黑", arial, helvetica, sans-serif;
@fs-big: 30;
@fs-12: 12px;
@fs-14: 14px;
@fs-16: 16px;
@fs-18: 18px;
@fs-20: 20px;
@fs-13: 13px;
@fs-15: 15px;
@width: 100%;
@height: 100%;
@black: #000000;
@white: #ffffff;
@gray-f5: #f5f5f5;
@gray-f2: #f2f2f2;
@gray-33: #333333;
@gray-66: #666666;
@gray-99: #999999;
@gray-cc: #cccccc;
@gray-dd: #dddddd;
@gray-ee: #eeeeee;
@main-color: #0fadff;
@color: #04b1ff;
@user-color: #0386ff;
@error-color: #ff5e5e;
@success-color: #008000;
@waring-color: #c6b200;
@margin-big: 40px;
@padding-big: 40px;
@border-string: "top", "bottom", "left", "right", "none";
@imgs: "../img";
/**-定义函数-**/
//选择模式
.user-type(@type:text) {
  -webkit-user-select: @type;
  -moz-user-select: @type;
  -ms-user-select: @type;
  user-select: @type;
}

//盒子
.disk-type(@type:block,@width:100%,@index:20) {
  position: relative;
  z-index: @index;
  display: @type;
  width: @width;
}

.disk-layer(@width:@width,@height:auto) when (default(@height)) {
  position: relative;
  z-index: 10;
  display: block;
  width: @width;
  height: @height;
}

//滚动
.overflow() {
  .disk-type;
  overflow: auto;
  &.hidden {
    height: @height;
    overflow: hidden;
  }
}

//位置
.pos-style(@type,@index:30) {
  position: e(@type) !important;
  z-index: @index;
}

.pos-top-left(@type,@top:0,@left:0,@index:30) {
  .pos-style(@type, @index);
  top: @top;
  left: @left;
}

.pos-top-right(@type,@top:0,@right:0,@index:30) {
  .pos-style(@type, @index);
  top: @top;
  right: @right;
}

.pos-bto-left(@type,@bto:0,@left:0,@index:30) {
  .pos-style(@type, @index);
  bottom: @bto;
  left: @left;
}

.pos-bto-right(@type,@bto:0,@right:0,@index:30) {
  .pos-style(@type, @index);
  bottom: @bto;
  right: @right;
}

.float-left() {
  float: left !important;
}

.float-right() {
  float: right !important;
}

.float-none() {
  float: none !important;
}

.laryer-margin(@start: 0, @end: @margin-big) {
  .fn-mt(@n: @start) when (@n <= @end) {
    .mt-@{n} {
      margin-top: unit(@n, px) !important;
    }
    .fn-mt(@n+5);
  }
  .fn-mr(@n: @start) when (@n <= @end) {
    .mr-@{n} {
      margin-right: unit(@n, px) !important;
    }
    .fn-mr(@n+5);
  }
  .fn-mb(@n: @start) when (@n <= @end) {
    .mb-@{n} {
      margin-bottom: unit(@n, px) !important;
    }
    .fn-mb(@n+5);
  }
  .fn-ml(@n: @start) when (@n <= @end) {
    .ml-@{n} {
      margin-left: unit(@n, px) !important;
    }
    .fn-ml(@n+5);
  }
  .fn-mar-all(@n: @start) when (@n <= @end) {
    .mar-all-@{n} {
      margin: unit(@n, px) !important;
    }
    .fn-mar-all(@n+5);
  }
  .fn-mt;
  .fn-mr;
  .fn-mb;
  .fn-ml;
  .fn-mar-all;
}

.laryer-padding(@start: 0, @end: @padding-big) {
  .fn-pt(@n: @start) when (@n <= @end) {
    .pt-@{n} {
      padding-top: unit(@n, px) !important;
    }
    .fn-pt(@n+5);
  }
  .fn-pr(@n: @start) when (@n <= @end) {
    .pr-@{n} {
      padding-right: unit(@n, px) !important;
    }
    .fn-pr(@n+5);
  }
  .fn-pb(@n: @start) when (@n <= @end) {
    .pb-@{n} {
      padding-bottom: unit(@n, px) !important;
    }
    .fn-pb(@n+5);
  }
  .fn-pl(@n: @start) when (@n <= @end) {
    .pl-@{n} {
      padding-left: unit(@n, px) !important;
    }
    .fn-pl(@n+5);
  }
  .fn-pad-all(@n: @start) when (@n <= @end) {
    .pad-all-@{n} {
      padding: unit(@n, px) !important;
    }
    .fn-pad-all(@n+5);
  }
  .fn-pt;
  .fn-pr;
  .fn-pb;
  .fn-pl;
  .fn-pad-all;
}

//设置盒子
.set-layout(@d,@w,@h,@p:relative) {
  position: e(@p);
  display: e(@d);
  width: @w;
  height: @h;
}

.box-fill() {
  display: block;
  width: 100%;
  height: 100%;
}

.layer-width(@width:100,@unit:%) {
  width: unit(@width, @unit);
}

.layer-height(@height:100,@unit:%) {
  height: unit(@height, @unit);
}

//设置边距
.layer-margin-num(@num) {
  margin: @num;
}

.layer-padding-num(@num) {
  padding: @num;
}

.fn-set-margin(@num,@layout) {
  margin-@{layout}: @num;
}

.fn-set-pad(@num,@layout) {
  padding-@{layout}: @num;
}

//设置背景
.fn-set-background(@bg) {
  background: e(@bg);
}

//设置透明度
.fn-set-opacity(@r,@g,@b,@a) {
  @c: rgba(@r, @g, @b, @a);
  @c2: argb(@c);
  filter: ~"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='@{c2}', endColorstr='@{c2}')";
  background-color: @c;
  :root & {
    filter: none;
  }
}

.fn-set-opacity-n(@num) {
  @op: @num * 100;
  opacity: @num;
  filter: alpha(opacity=@op);
}

//设置阴影
.fn-box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000;) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -o-box-shadow: @arguments;
  box-shadow: @arguments;
}

.fn-box-shadow-type(@shadow) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  -o-box-shadow: @shadow;
  box-shadow: @shadow;
}

.fn-set-transition(@cont) {
  @o: -o-;
  @ms: -ms-;
  @moz: -moz-;
  @webkit: -webkit-;
  transform: e(@cont);
    @{o}transform: @o+e(@cont);
    @{ms}transform: @ms+e(@cont);
    @{moz}transform: @moz+e(@cont);
    @{webkit}transform: @webkit+e(@cont);
}

.fn-set-transform(@cont) {
  transform: e(@cont);
  -o-transform: e(@cont);
  -ms-transform: e(@cont);
  -moz-transform: e(@cont);
  -webkit-transform: e(@cont);
}

.fn-set-transform-origin(@cont) {
  transform-origin: @cont;
  -o-transform-origin: @cont;
  -ms-transform-origin: @cont;
  -moz-transform-origin: @cont;
  -webkit-transform-origin: @cont;
}

//设置位置
.fn-set-tl(@t,@l) {
  top: @t;
  left: @l;
}

.fn-set-tr(@t,@r) {
  top: @t;
  right: @r;
}

.fn-set-bl(@b,@l) {
  bottom: @b;
  left: @l;
}

.fn-set-br(@b,@r) {
  bottom: @b;
  right: @r;
}

//设置高宽
.fn-set-width(@w) {
  width: @w;
}

.fn-set-height(@h) {
  height: @h;
}

//设置边框
.fn-border-none(@border:@border-string) {
  .fn-border-type(@i:1) when (@i<length(@border)) {
    @string: e(extract(@border-string, @i));
    .border-none-@{string} {
      border-@{string}: 0 none !important;
    }
    .fn-border-type(@i+1);
  }
  .fn-border-type(@i:1) when (@i=length(@border)) {
    @string: e(extract(@border-string, @i));
    .border-@{string} {
      border: 0 none !important;
    }
  }

  .fn-border-type;
}

.border-top(@size:1px,@style,@color) {
  border-top: @arguments;
}

.border-bto(@size:1px,@style,@color) {
  border-bottom: @arguments;
}

.border-left(@size:1px,@style,@color) {
  border-left: @arguments;
}

.border-right(@size:1px,@style,@color) {
  border-right: @arguments;
}

.border-all(@size:1px,@style,@color) {
  border: @arguments;
}

//设置角度
.border-radius(@radius:5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

//三角样式
.fn-arrow-dir(@width:8px,@color) {
  width: 0;
  height: 0;
  border: @width solid;
  border-color: @color;
}

/*按钮*/
.button-style(@w,@h,@tc,@bg,@bc,@r) {
  .set-layout(block, @w, @h);
  .text-mid-line(@h);
  .border-radius(@r);
  .text-color(@tc);
  .fs-14;
  .tm-center;
  background: e(@bg);
  border: 1px solid @bc;
  &.radius {
    .border-radius(20px);
  }
  &.link {
    background: transparent;
    border: 0 none;
  }
  &.line {
    background: transparent;
    &.white {
      border: 1px solid #FFFFFF;
    }
    &.blue{
      border: 1px solid @user-color;
      color: @user-color ;
    }
  }
  &.no-bd {
    border: 0 none;
  }
}

//字体样式
.ft-family() {
  font-family: @ft-family;
}

.ft-style(@type:normal) {
  font-style: @type;
}

.ft-weight(@weight:normal) {
  font-weight: @weight;
}

.ft-decoration(@type:none) {
  text-decoration: @type;
}

.ft-wrap() {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ft-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.ft-clamp(@line) {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @line
}

.font-size(@n, @i: 8) when (@i =< @n) {
  .fs-@{i} {
    font-size: unit(@i, px);
  }
  .font-size(@n, (@i+1));
}

.fs-number(@size:12,@unit:px) {
  font-size: unit(@size, @unit);
}

.text-color(@color:@gray-33) {
  color: @color;
}

.text-mid-line(@height) {
  height: @height;
  line-height: @height;
}